<template>
  <el-dialog title="分享展示" :close-on-click-modal="false" :destroy-on-close="true" width="500px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox" style="justify-content: center;">
      <div class="share-left">
        <el-carousel trigger="click" height="300px" :loop="false">
          <el-carousel-item v-for="(item, index) in info.resourceUrlList" :key="index">
            <!-- 纯文本 -->
            <div class="media-box" v-if="item.fileType === '1'">
              <iframe style="width: 378px;height: 300px;" :src="'https://view.officeapps.live.com/op/view.aspx?src='+item.fileUrl"></iframe>
            </div>
            <!-- 图片 -->
            <div class="media-box" v-if="item.fileType === '2'">
              <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
            </div>
            <!-- 音频 -->
            <div class="media-box" v-if="item.fileType === '3'">
              <audio class="audio" controls :src="item.fileUrl"></audio>
            </div>
            <!-- 视频 -->
            <div class="media-box" v-if="item.fileType === '4'">
              <video class="video" controls :src="item.fileUrl">
                <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
              </video>
            </div>
          </el-carousel-item>
        </el-carousel>
        <el-rate v-model="score" style="margin-top: 20px;"></el-rate>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { shareScoreDetail, shareGrade } from '@/api/student/lesson/classroom'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      info: {
        appraisedList: [],
        resourceUrlList: []
      },
      score: 0
    }
  },
  methods: {
    async shareScoreDetail (data) {
      const res = await shareScoreDetail({ activityId: this.id })
      if (res.code === '200') {
        this.info = res.data
      }
    },
    async shareGrade (data) {
      const res = await shareGrade(data)
      if (res.code === '200') {
        this.$message.success('操作成功')
        // 重新刷新活动列表
        this.$emit('handleEmit', 'confirm')
      } else {
        this.$message.error(res.message)
      }
    },
    submitForm () {
      if (this.score === 0) {
        this.$message.error('请评分')
        return
      }
      const data = {
        activityId: this.id,
        score: this.score
      }
      this.shareGrade(data)
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.shareScoreDetail()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .share-left {
    float: left;
    width: 400px;
    height: 400px;
    padding: 20px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    overflow-y: scroll;
  }
  .media-box {
    width: 378px;
    height: 300px;
    .video {
      width: 378px;
      height: 300px;
      outline: none;
    }
  }
</style>
